<template>
  <el-main>
    <Header />
    <el-row>
      <el-col :span="24" style="margin: auto">
        <el-steps :active="3">
          <el-step title="步骤 1" description="加入购物车"></el-step>
          <el-step title="步骤 2" description="生成订单"></el-step>
          <el-step title="步骤 3" description="支付"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <br />
    <el-row>
      订单总金额：<span style="color: red; font-size: 50px">{{
        orderTotal
      }}</span>
      元
    </el-row>
    <el-row>
      <p style="color: black; font-size: 30px; font-family: cursive">
        * 请选择你的支付方式：
      </p>
    </el-row>
    <el-row>
      <el-tabs type="border-card">
        <el-tab-pane label="支付宝支付">
          <el-row>
            <el-col :span="16">
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"
                  ><input type="radio" name="a" id="" checked
                /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu1.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">中国工商银行</el-col>
                <el-col :span="2">****1234</el-col>
                <el-col :span="3">储蓄卡 | 快捷</el-col>
                <el-col :span="3" style="float: right"
                  >支付
                  <span style="color: red">{{ orderTotal }}</span> 元</el-col
                >
              </el-row>
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu1.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">中国工商银行</el-col>
                <el-col :span="2">****5678</el-col>
                <el-col :span="3">储蓄卡 | 快捷</el-col>
                <el-col :span="3"></el-col>
              </el-row>
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu2.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">账户余额</el-col>
                <el-col :span="2">0.00元</el-col>
                <el-col :span="3"></el-col>
                <el-col :span="3" style="float: right; color: gray"
                  >金额不足，可先充值</el-col
                >
              </el-row>
              <el-row style="border: 1px solid black">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu3.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">余额宝</el-col>
                <el-col :span="2">**敏</el-col>
                <el-col :span="3"></el-col>
                <el-col :span="3" style="float: right"
                  >支付
                  <span style="color: red">{{ orderTotal }}</span> 元</el-col
                >
              </el-row>
              <br />
              <el-row
                ><p>
                  <el-button
                    type="success"
                    icon="el-icon-check"
                    circle
                  ></el-button>
                  &nbsp;<span style="font-weight: bolder"
                    >安全设置检测成功！</span
                  >
                </p></el-row
              >
              <el-row>支付宝支付密码：</el-row>
              <el-row
                ><input type="text" name="" id="" />
                <span style="color: blue">忘记密码？</span></el-row
              >
              <el-row style="color: gray">请输入6位数字支付密码</el-row>
              <br />
              <el-row>
                <el-button type="primary" @click.prevent="open"
                  >确认支付</el-button
                ></el-row
              >
            </el-col>
            <el-col :span="8">
              <el-row>
                <img
                  src="../assets/images/zhifubao.jpg"
                  alt=""
                  style="width: 400px; height: 344px; margin-left: 100px"
                />
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="微信支付">
          <el-row>
            <el-col :span="16">
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu1.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">中国工商银行</el-col>
                <el-col :span="2">****1234</el-col>
                <el-col :span="3">储蓄卡 | 快捷</el-col>
                <el-col :span="3" style="float: right"
                  >支付
                  <span style="color: red">{{ orderTotal }}</span> 元</el-col
                >
              </el-row>
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu1.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">中国工商银行</el-col>
                <el-col :span="2">****5678</el-col>
                <el-col :span="3">储蓄卡 | 快捷</el-col>
                <el-col :span="3"></el-col>
              </el-row>
              <el-row style="border: 1px solid black; border-bottom: none">
                <el-col :span="1"><input type="radio" name="a" id="" /></el-col>
                <el-col :span="3">
                  <img
                    src="../assets/images/zhifu2.png"
                    alt=""
                    style="width: 25px; height: 25px"
                /></el-col>
                <el-col :span="7">账户余额</el-col>
                <el-col :span="2">0.00元</el-col>
                <el-col :span="3"></el-col>
                <el-col :span="3" style="float: right; color: gray"
                  >金额不足，可先充值</el-col
                >
              </el-row>
              <br />
              <el-row
                ><p>
                  <el-button
                    type="success"
                    icon="el-icon-check"
                    circle
                  ></el-button>
                  &nbsp;<span style="font-weight: bolder"
                    >安全设置检测成功！</span
                  >
                </p></el-row
              >
              <el-row>微信支付密码：</el-row>
              <el-row
                ><input type="text" name="" id="" />
                <span style="color: blue">忘记密码？</span></el-row
              >
              <el-row style="color: gray">请输入6位数字支付密码</el-row>
              <br />
              <el-row>
                <el-button type="primary" @click.prevent="open"
                  >确认支付</el-button
                >
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row>
                <img
                  src="../assets/images/weixin.jpg"
                  alt=""
                  style="width: 400px; height: 344px; margin-left: 100px"
                />
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <Footer />
  </el-main>
</template>

<script>
import { mapState } from "vuex";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
  computed: {
    ...mapState("user", ["user"]),
    // 总价
    orderTotal() {
      return this.$route.query.orderTotal;
    },
  },
  methods: {
    // 支付成功
    open() {
      this.$alert("支付成功!", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
          let orderIds = JSON.parse(this.$route.query.orderIds); // 从查询参数中获取订单ID数组并解析为数组
          orderIds.forEach((orderId) => { //从结算页获取的响应的orderId
            // 遍历订单ID数组
            let priceStatus = { //遍历这些订单ID，为每个订单创建一个支付价格状态和订单ID的对象。
              pricestatus: "已支付",
              orderid: orderId,  //orderid 存储每个订单的支付状态和对应的订单ID
            };
            this.axios
              .post("/api/accounts/priceStatus", { //更新
                //支付状态
                priceStatus: priceStatus,  //将 priceStatus 对象作为请求体发送给服务器 
              })
              .then((response) => {
                console.log("支付状态写入成功");
              })
              .catch((error) => {
                console.log("支付状态写入失败：", error);
              });
          });
          this.$router.push("/");
        },
      });
    },
  },
  created(){
    this.productId = this.$route.query.productId;
  }
};
</script>

<style>
</style>